import React, { useState, useEffect } from 'react';
import {
  Form,
  Input,
  Select,
  Radio,
  DatePicker,
  Button,
  Progress
} from 'antd';
import type {
  FormInstance,
  //   FormProps,
  //   RadioChangeEvent,
  //   ProgressProps
} from 'antd';
import dayjs, { Dayjs } from 'dayjs';
import 'dayjs/locale/zh-cn';
import './style.css'; // 样式文件

// 设置dayjs为中文
dayjs.locale('zh-cn');

interface ProfileFormValues {
  gender: 'male' | 'female';
  birthday: Dayjs | null;
  phone: string;
  realPhone: string;
  qq: string;
  email: string;
  industry: string;
  occupation: string;
  city: string;
  address: string;
  usageTendency: string;
  companyName: string;
}
const ProfileForm: React.FC = () => {
  const [form] = Form.useForm<FormInstance>();
  const [completionRate, setCompletionRate] = useState(30);

  // 表单初始值（模拟已填写的部分数据）
  const initialValues: ProfileFormValues = {
    gender: 'female',
    birthday: dayjs('2025-05-15'),
    phone: '183****4421',
    realPhone: '183****44217',
    qq: '',
    email: '',
    industry: '',
    occupation: '',
    city: '',
    address: '',
    usageTendency: '',
    companyName: ''
  };

  // 计算表单完善度
  const calculateCompletionRate = () => {
    const formFields = form.getFieldsValue();
    const totalFields = 12; // 总字段数
    let filledFields = 0;

    // 性别
    if (formFields.gender) filledFields++;

    // 生日
    if (formFields.birthday) filledFields++;

    // 手机号（只读，已预先填写）
    filledFields++;

    // 实名手机号（只读，已预先填写）
    filledFields++;

    // QQ
    if (formFields.qq) filledFields++;

    // 邮箱
    if (formFields.email) filledFields++;

    // 所属行业
    if (formFields.industry) filledFields++;

    // 职业
    if (formFields.occupation) filledFields++;

    // 所在城市
    if (formFields.city) filledFields++;

    // 详细地址
    if (formFields.address) filledFields++;

    // 使用倾向
    if (formFields.usageTendency) filledFields++;

    // 公司名称
    if (formFields.companyName) filledFields++;

    return Math.round((filledFields / totalFields) * 100);
  };

  // 监听表单变化更新完善度
  useEffect(() => {
    const rate = calculateCompletionRate();
    setCompletionRate(rate);
  }, [form]);

  // 表单提交处理
  const handleSubmit = async (values: ProfileFormValues) => {
    console.log('Received values of form:', values);
    // 这里可以添加表单提交逻辑，比如API调用
    alert('表单提交成功！');
  };

  return (
    <div className="profile-form-container">
      {/* 进度条 */}
      <div className="progress-bar-container">
        <div className="progress-text">您的资料完善度：{completionRate}%</div>
        <Progress
          percent={completionRate}
          status={completionRate === 100 ? 'success' : 'active'}
          strokeColor={{
            '0%': '#1890ff',
            '100%': '#52c41a',
          }}
          className="progress-bar"
        />
        <div className="progress-checkmark">✓</div>
      </div>

      {/* 表单 */}
      <Form
        form={form}
        initialValues={initialValues}
        layout="vertical"
        className="profile-form"
        onFinish={handleSubmit}
      >
        {/* 性别 */}
        <Form.Item
          label="性别"
          name="gender"
          rules={[{ required: true, message: '请选择性别' }]}
        >
          <Radio.Group>
            <Radio value="male">男</Radio>
            <Radio value="female">女</Radio>
          </Radio.Group>
        </Form.Item>

        {/* 生日 */}
        <Form.Item
          label="生日"
          name="birthday"
          rules={[{ required: true, message: '请选择生日' }]}
        >
          <DatePicker
            format="YYYY-MM-DD"
            style={{ width: '100%' }}
          />
        </Form.Item>

        {/* 手机号 */}
        <Form.Item
          label="手机号"
          name="phone"
        >
          <Input value={initialValues.phone} readOnly />
        </Form.Item>

        {/* 实名手机号 */}
        <Form.Item
          label="实名手机号"
          name="realPhone"
        >
          <Input value={initialValues.realPhone} readOnly />
        </Form.Item>

        {/* QQ */}
        <Form.Item
          label="QQ"
          name="qq"
          rules={[{ required: true, message: '请输入QQ号码' }]}
        >
          <Input placeholder="输入您的QQ" />
        </Form.Item>

        {/* 邮箱 */}
        <Form.Item
          label="邮箱"
          name="email"
          rules={[{ required: true, message: '请输入邮箱' }]}
        >
          <Input placeholder="输入您的常用邮箱" />
        </Form.Item>

        {/* 所属行业 */}
        <Form.Item
          label="所属行业"
          name="industry"
          rules={[{ required: true, message: '请选择所属行业' }]}
        >
          <Select placeholder="请选择">
            <Select.Option value="tech">科技</Select.Option>
            <Select.Option value="finance">金融</Select.Option>
            <Select.Option value="education">教育</Select.Option>
            <Select.Option value="healthcare">医疗健康</Select.Option>
            <Select.Option value="retail">零售</Select.Option>
          </Select>
        </Form.Item>

        {/* 职业 */}
        <Form.Item
          label="职业"
          name="occupation"
          rules={[{ required: true, message: '请选择职业' }]}
        >
          <Select placeholder="请选择">
            <Select.Option value="developer">开发者</Select.Option>
            <Select.Option value="manager">经理</Select.Option>
            <Select.Option value="designer">设计师</Select.Option>
            <Select.Option value="student">学生</Select.Option>
          </Select>
        </Form.Item>

        {/* 所在城市 */}
        <Form.Item
          label="所在城市"
          name="city"
          rules={[{ required: true, message: '请选择所在城市' }]}
        >
          <Select placeholder="请选择省/市/区">
            <Select.Option value="beijing">北京</Select.Option>
            <Select.Option value="shanghai">上海</Select.Option>
            <Select.Option value="guangzhou">广州</Select.Option>
            <Select.Option value="shenzhen">深圳</Select.Option>
          </Select>
        </Form.Item>

        {/* 详细地址 */}
        <Form.Item
          label="详细地址"
          name="address"
          rules={[{ required: true, message: '请输入详细地址' }]}
        >
          <Input
            placeholder="仅供活动寄送奖品，30字内"
            maxLength={30}
          />
        </Form.Item>

        {/* 使用倾向 */}
        <Form.Item
          label="使用倾向"
          name="usageTendency"
          rules={[{ required: true, message: '请选择使用倾向' }]}
        >
          <Select placeholder="请选择">
            <Select.Option value="personal">个人使用</Select.Option>
            <Select.Option value="business">商业用途</Select.Option>
            <Select.Option value="education">教育用途</Select.Option>
          </Select>
        </Form.Item>

        {/* 公司名称 */}
        <Form.Item
          label="公司名称"
          name="companyName"
          rules={[{ required: true, message: '请输入公司名称' }]}
        >
          <Input
            placeholder="请填写公司名称，30字内"
            maxLength={30}
          />
        </Form.Item>

        {/* 保存按钮 */}
        <div className="form-actions">
          <Button type="primary" htmlType="submit" className="save-button">
            保存
          </Button>
        </div>
      </Form>
    </div>
  );
};

export default ProfileForm;